import React, { useCallback, useEffect, useState } from 'react'
import './LyricMain.scss'
import { useDispatch, useSelector } from 'react-redux';
import { RootState } from '@/modules/RootState';
import { getLyricWord } from '@/utils/api';
import { useAudioContext } from '@/views/Audio/Audio';

function LyricMain() {
    const musicList = useSelector((state:RootState) => state.musicList);
    const musicDispatch = useAudioContext()
    const dispatch = useDispatch()

    useEffect(()=>{
        dispatch(getLyricWord(musicList.songDetail.id))
    },[musicList.songDetail])
  
    const [activeHigh,setActiveHigh] = useState(-1)
    const [highlightIndex,setHighlightIndex] = useState(0)
    const lineHeight = 30

    const picUrl = useCallback(()=>{
        if(Object.keys(musicList.songDetail).length != 0){
            return <img src={musicList.songDetail.al.picUrl} alt=""/>
        }else{
            return <img src="src/assets/王冰冰.jpg" alt=""/>
        }
    },[musicList.songDetail])

    useEffect(()=>{
        const currentTime = musicDispatch.audioCurrent * 1000
        const lyrics = musicList.musicLyric
        let index = 0
        for (let i = 0; i < lyrics.length; i++) {
            if (lyrics[i].timeStamp <= currentTime) {
                index = i
            } else {
                break
            }
        }
        if (index !== activeHigh) {
            setActiveHigh(index)
        }

        setHighlightIndex(index)
    },[musicDispatch.audioCurrent])

  return (
    <div className="LyricBody">
        <div className="LyricBody2">
            <div className="LyricBody3">
                {
                picUrl()
                }
            </div>
            <div className="LyricBody4">
                <div className="LyricBody6">
                    <div>
                        {musicList.songDetail.name}
                    </div>
                    <div className="LyricBody7">
                        歌手：
                        {musicList.songDetail.ar && musicList.songDetail.ar[0].name ? musicList.songDetail.ar[0].name : '' }
                    </div>
                    <div className="LyricBody7">
                        专辑：
                        {musicList.songDetail.al && musicList.songDetail.al.name ? musicList.songDetail.al.name : '' }
                    </div>
                </div>
                <div className="LyricBody5">
                    <div className="LyricBody8" style={{transform: `translateY(-${lineHeight * highlightIndex}px)`}}>
                        {
                            musicList.musicLyric.map((item,index)=>{
                                return(
                                    <>
                                        {
                                            item.content == "" ? <></> :  
                                            (
                                            <p className={index === activeHigh ? 'active' : ''} key={index}>
                                                  { item.content}
                                            </p>
                                            )
                                        }
                                       
                                    </>
                                )
                            })
                        }
                    </div>
                </div>
            </div>
        </div>
    </div>

  )
}

export default React.memo(LyricMain)